<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgdata" prefix="epgdata"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://chances.com.cn/jsp/epgutils" prefix="epgutils" %>

<!-- 菜单栏目-->
<epgdata:categoryItem var="menu_cat" size="4" code="${_templateParams['menu_cat']}" />
<!-- 拼所有频道的json级数 -->
<epgdata:bizList var="chnMenu" code="${_templateParams['channelMenu_biz']}"/>

<!DOCTYPE html>
<html>
<head>
	<title>SMART_TV</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script>
		var channelMenu = [
		<c:forEach var="menu" items="${chnMenu}">
			{title:'${menu.title}',categoryCode:'${menu.categoryCode}'},
		</c:forEach>
		];
	</script>
	<%@include file="/sites/weixin/js/common.jsp" %>
	<%@include file="/sites/weixin/common/common_js.jsp" %>
	<link rel="stylesheet" type="text/css" href="${_contextPath}/sites/weixin/css/wx.css" />
</head>
<body onload="init()">
<div id="app">
	<!-- 上方菜单 -->
	<c:set var="menuIdx" value="1"/>
	<%@include file="topMenu.jsp" %>
	
	<!-- 二级导航 -->
	<div class="navbar-fixed-top" style="margin-top:3.5em;">
	<div  id="scroll_menu_swiper"  class="swiper-container" style="background-color: #f2f1f1;" >
		<div id="scroll_menu"  class="swiper-wrapper" style="margin-left:2%;">
			<template v-for="(item,index) in chnMenu">
				<div class="swiper-slide"  style="height: 3em;width:15%;background-color: #f2f1f1;">
					<div  :id="'liveType_'+(index+1)" class="inner-live" 
						@click="chooseLiveType(item.categoryCode,(index+1))">{{item.title}}</div>
				</div>
			</template>
		</div>
	</div>
	</div>
	
	<!-- 频道列表 -->
	<div id="content" class="row live-list-pannel">
	<template v-for="(item,index) in channels">
		<div class="row row-empty-live" :id="'live_'+index" 
			@click="gotoDetail(item.item.url,'live_'+index,item.item.title,item.item.itemIcon)">
			<div class="col-xs-4 col-content-live">
				<div class="live-img-div">
					<img  class="lazyImg width-100" :src="contextPath+'/images/defaultBg_3.jpg'"
						:data-original="strExist(item.item.itemIcon)?(resourcePath+item.item.itemIcon):
						 ((strExist(item.item.source)&&strExist(item.item.source.icon))?(resourcePath+item.item.source.icon):
						 (contextPath+'/images/defaultBg_3.jpg'))"/>
				</div>
			</div>
			<div class="col-xs-8">
				<div><span style="font-size: 1.2em;">{{item.item.title}}</span></div>
				<div>
					<img src="${_templatePath}/images/thr.png"/>
					<span v-if="item.current != null" style="font-size: 1.1em;">
						{{getDayLong(item.current.startTime)}}&nbsp;{{item.current.name}}
					</span>
				</div>
				<div>
					<span v-if="item.next != null" style="color:#aaaaaa;font-size: 0.9em;">
						{{getDayLong(item.next.startTime)}}&nbsp;{{item.next.name}}
					</span>
				</div> 
			</div>
		</div>
		<div class="row line-live"></div>
	</template>
	</div>
</div>	
<%@include file="/sites/weixin/common/bodyEndVm.jsp" %>
</body>
<style>
.swiper-slide{
	margin-right: 4%;
}
</style>
<script>
var vm = new Vue({
	el:"#app",
	data:{
		resourcePath:'${_resourcePath}',
		contextPath:'${_contextPath}/sites/weixin',
		menuCat:'',
		chnMenu:channelMenu,
		channels:[],
		CurrentLiveTypeId:1
	},
    mounted: function () {
		this.$nextTick(function () {
			$(document).ready(function(){
				   var names = ["#scroll_menu_swiper"];
			   		$.each(names,function(i,val){
			   			 var swiper1 = new Swiper(val, {
			    			  	 slidesPerView: 'auto',
			       				 //spaceBetween: 10
			   				 });
			   		});
			   });
			this.initCurrentLiveTypeId();
			this.chooseLiveType(this.chnMenu[this.CurrentLiveTypeId-1].categoryCode,this.CurrentLiveTypeId);
	 	});
    },
	methods:{
		initCurrentLiveTypeId:function(){
			console.log("init");
			var arr = "${param.efid}".split("_");
			if(arr.length > 2){
				this.CurrentLiveTypeId = arr[2];
			}
			console.log(this.CurrentLiveTypeId);
		},
		getChannels:function(categoryCode){
			$.ajax({
				method:"get",
				url:"${_contextPath}/api/channel/category/"+categoryCode+"?size=99&bizCode=${_context.bizCode}&siteCode=${_context.siteCode}",
				async:false,
				success:function(data){
					vm.channels = data.resultSet;
					console.log("channel:");
					console.log(data);
				}
			});
		},
		gotoPage:function(url){
			window.location.href = url;
		},
		changeCss:function(typeId){
			$("#liveType_"+this.CurrentLiveTypeId).removeClass().addClass("inner-live");
			this.CurrentLiveTypeId = typeId;
			$("#liveType_"+this.CurrentLiveTypeId).removeClass().addClass("inner-live-fcs");
		},
		chooseLiveType:function(categoryCode,typeId){
			this.changeCss(typeId);
			this.channels = [];
			if(strExist(categoryCode)){
				this.getChannels(categoryCode);
			}
			setTimeout(this.lazyLoad,100);
		},
		lazyLoad:function(){
			$(document).ready(function(){
				$(".lazyImg").lazyload({ 
			        placeholder : "images/defaultBg_3.jpg", 
			        effect : "fadeIn" 
		   			}); 
			});
		},
		getDayLong:function(dayLong){
			var date = new Date(dayLong);
			var hour = date.getHours();
			var minute = date.getMinutes();
			if(hour < 10){
				hour = '0'+hour
			}
			if(minute < 10){
				minute = '0'+minute;
			}
			return hour+":"+minute;
		},
		gotoDetail:function(url,id,title,icon){
			if(strExist(title)){
				url = addUrlParameter(url,"title",title);
			}
			if(strExist(icon)){
				url = addUrlParameter(url,"icon",icon);
			}
			id = id+"_"+this.CurrentLiveTypeId;
			gotoLink(url,id);
		},
		strExist:strExist
	}
});
function init(){
}
</script>
</html>